<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>newTravel spot - open time</title>
    <style>
        *{
            /* border: 1px solid red; */
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            margin: 10px auto;
            width: 95%;
            /* height: 100vh; */
        }
        header{            
            width: max-content;
            margin: 10px auto;
            padding: 10px;
        }
        header h1{
            font-weight: 600;
            text-shadow: 0 5px 10px #333;
            color: rgb(0, 70, 128);
            text-align: center;
        }
        header .dashedBox{
            margin: 10px 0;
            height: 1px;
            background-image: linear-gradient(to right, rgba(51, 51, 51, 0.692) 30%, rgba(51, 51, 51, 0.692) 55%, transparent 50%);
            background-size: 4px 1px;
            background-repeat: repeat-x;  
        }
        main{
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }
        main .xia-qiu,.chun-dong{
            text-align: center;
        }
        main .line{
            height: 200px;
            border:1px solid #333;
        }
        main ul .timeMsg{
            background-color: rgba(0, 70, 128, 0.575);
            border-radius: 10px/10px;
            padding: 2px;
        }
        main ul .timeInfo{
            list-style-type: none;
        }
        main ul{
            margin: 20px 0;
        }
        main ul li{
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <header>
        <h1>青城山-景区开放时间</h1>
        <div class="dashedBox"></div>
    </header>
    <main>
        <section class="xia-qiu">
            <h2>夏-秋</h2>
            <ul>
                <li class="timeMsg">上午</li>
                <li class="timeInfo">无</li>
                <li class="timeMsg">上午</li>
                <li class="timeInfo">无</li>
                <li class="timeMsg">全天</li>
                <li class="timeInfo"> 6：00 - 18：30</li>
            </ul>
        </section>
        <section class="line"></section>
        <section class="chun-dong">
            <h2>冬-春</h2>
            <ul>
                <li class="timeMsg">上午</li>
                <li class="timeInfo">无</li>
                <li class="timeMsg">上午</li>
                <li class="timeInfo">无</li>
                <li class="timeMsg">全天</li>
                <li class="timeInfo"> 8：00 - 17：30</li>
            </ul>
        </section>
    </main>
</body>
</html>